﻿$(document).ready(function () {
    GetChartData();
});

function GetChartData(value) {
    var store;
    var params = "{}";
    $.ajax({
        type: "POST",
        url: "piechart.aspx/GetChartData",
        data: params,
        async: false,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            store = eval(msg.d);
            ShowPieChart(store);
        }
    });
}
function ShowPieChart(store) {
    var dataPie = "[";
    for (var i = 0; i < store.length; i++) {
        dataPie = dataPie + "['" + store[i].Type + "',";
        dataPie = dataPie + store[i].Percentage + "],";
    }
    dataPie = dataPie.substring(0, dataPie.length - 1);
    dataPie = dataPie + "]";

    chart = new window.Highcharts.Chart({
        chart: {
            renderTo: 'divPieChart',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Response By Gender'
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.point.name + '</b>: ' + (this.percentage).toFixed(2) + ' %';
            }
        },

        plotOptions: {
            pie: {
                allowPointSelect: false,
                cursor: 'pointer',
                dataLabels: {
                    //enabled: true,
                    distance: -50,
                    color: '#000000',
                    // connectorColor: '#000000',
                    formatter: function () {
                        return '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + ' %';
                    }
                },
                showInLegend: true,
                center: ['50%', '50%'],
                size: "90%"
            }
        },
        series: [{
            type: 'pie',
            name: '',
            data: eval(dataPie)
        }]
    });
}
            